<template>
	<view class="uniActivity">
		<view class="activityItem" @click="operAct('detail')">
			<view class="bg">
				<image :src="activityItemOne.cover" mode=""></image>
				<view class="bgMain flex alignCenter" v-if="canOffline || canJoin || canStar || canConGroup">
					<view class="flex alignCenter justConEnd smallOper">
						<!-- <i class="iconfont icon-lajitong delete" v-if="canDelete" @click="operAct('del')"></i> -->
						<image class="star" v-if="canStar" :src="activityItemOne.isCollection?'https://image.alhelp.net/uploads/20231104/39ffc5692e205ff0b376a0b9da9ca833.png':'https://image.alhelp.net/uploads/20231104/340eeb08e38fe3fa9f53bae593879eb4.png'" mode="widthFix" @click.stop="operAct('star')"></image>
					</view>
					<view class="oper font12 colorMain" >
						<text v-if="canOffline && userId==activityItemOne.createUserId" @click.stop="operAct('offline')">下架</text>
						<text v-if="canJoin && !activityItemOne.isJoinActivity && userId!=activityItemOne.createUserId" @click.stop="operAct('join')"><text class="focusMargin">+</text>加入</text>
						<text v-if="canConGroup" @click.stop="operAct('connect')"><text class="focusMargin">+</text>小组</text>
						<!-- <text v-if="canEdit" @click="operAct('edit')"><i class="iconfont icon-bianji"></i>编辑</text> -->
						<!-- <text v-if="canActivity" @click="operAct('activity')"><i class="iconfont icon-bianji"></i>活动</text> -->
					</view>
				</view>
			</view>
			<view class="con font14">
				<view class="title hiddenOneline">{{activityItemOne.name}}</view>
				<view class="tag colorBlue font12">
					<text>({{activityItemOne.subjectCode}}){{activityItemOne.subjectName}}</text>
				</view>
			</view>
			<view class="chooseImg" v-if="activityItemOne.chooseStatus">
				<image src="@/static/image/icons/cr.png" mode="widthFix"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { operAboutHot } from "@/api/school.js"
	import { joinActivity,offlineActivity } from "@/api/send.js"
	import { payBeforeTip } from "@/utils/common.js"
	export default {
		name:"uni-activity",
		props:{
			activityItem:{
				type:Object,
				default(){
					return {}
				}
			},
			canOffline:{
				type:Boolean,
				default:false
			},
			canDetail:{
				type:Boolean,
				default:true
			},
			canJoin:{
				type:Boolean,
				default:false
			},
			canStar:{
				type:Boolean,
				default:false
			},
			canConGroup:{
				type:Boolean,
				default:false
			},
			groupId:{
				type:String,
				default:''
			}
		},
		watch:{
			activityItem: {
			    handler(newValue, oldValue) {
			        console.log("监听",newValue);
					this.activityItemOne=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				activityItemOne:'',
				userId:''
			};
		},
		created() {
			this.userId=uni.getStorageSync('userId')
		},
		methods:{
			operAct(type){
				if(type=='offline'){
					uni.showModal({
						title: '提示',
						content: '确定下架该活动吗？',
						success:(res)=> {
							if (res.confirm) {
								let param={
									teamId:this.groupId,
									teamActivityId:this.activityItemOne.id
								}
								offlineActivity(param).then((res)=>{
									if(res.code==100000){
										this.$emit('actComOper',{type:type,item:this.activityItemOne})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}else if(type=='star'){
					// 收藏、稍后回答api
					let param={
						isAdd:!this.activityItemOne.isCollection,
						modelId:this.activityItemOne.id,
						modelType:4,//1提问 2回答 -2待回答 3小组 4活动
					}
					operAboutHot(param).then((res)=>{
						if(res.code==100000){
							this.activityItemOne.isCollection=!this.activityItemOne.isCollection
						}
					})
					return
				}else if(type=='connect'){
					// 关联小组
					uni.navigateTo({
						url:'/pages/send/activity/aboutGroup/aboutGroup?id='+this.activityItemOne.id
					})
					return
				}else if(type=='join'){
					// 加入活动(要先选择要加入的小组)
					uni.showModal({
						title: '提示',
						content: '加入活动必须要选择一个要加入的小组，是否前往选择？',
						success:(res)=>{
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/send/activity/userBindGroup/userBindGroup?activity='+JSON.stringify(this.activityItemOne)
								})
							} else if (res.cancel) {}
						}
					});
					// if(this.activityItemOne.charge==1){
					// 	let tip=`加入该活动需要付费${this.activityItemOne.amount}元，是否确定加入？`
					// 	let param={
					// 		type:4,
					// 		money:this.activityItemOne.amount,
					// 		id:this.activityItemOne.id,
					// 		groupId:this.groupId
					// 	}
					// 	payBeforeTip(param,tip)
					// 	return
					// }else{
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '加入活动后需要按照活动设置的打卡模式，对任务进行打卡，是否确定加入？',
					// 		success:(res)=>{
					// 			if (res.confirm) {
					// 				let param={
					// 					teamId:this.groupId,
					// 					activityId:this.activityItemOne.id,
					// 				}
					// 				joinActivity(param).then((res)=>{
					// 					if(res.code==100000){
					// 						uni.showToast({
					// 							title:'加入成功',
					// 							icon:'none'
					// 						})
					// 						this.$emit('actComOper',{type:type,item:this.activityItemOne})
					// 					}
					// 				})
					// 			} else if (res.cancel) {}
					// 		}
					// 	});
					// }
					return
				}else if(type=='activity'){
					return
				}else if(type=='detail'){
					if(!this.canDetail){
						if(this.activityItemOne.isRelationTeam)return
						this.activityItemOne.chooseStatus=!this.activityItemOne.chooseStatus
						this.$emit('actComOper',{type:this.activityItemOne.chooseStatus?'add':'reduce',item:this.activityItemOne})
					}else{
						// // 获取groupId 是为了在给任务打卡的时候传参
						let groupId=this.groupId?this.groupId:''
						uni.navigateTo({
							url:'/pages/send/activity/activityDetail/activityDetail?id='+this.activityItemOne.id+'&groupId='+groupId
						})
					}
					return
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.activityItem{
	background: #fff;
	border-radius: 8rpx;
	border:1px solid $bordercolor;
	position: relative;
	.chooseImg{
		position: absolute;
		right: 0;
		top:0;
		height:190rpx;
		width: 100%;
		box-sizing: border-box;
		border-radius: 8rpx 8rpx 0 0;
		background: rgba(0, 0, 0, .3);
		text-align: right;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 0 8rpx 0 0;
		}
	}
	.bg{
		height:190rpx;
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		&>image{
			width:100%;
			height:100%;
			border-radius: 8rpx 8rpx 0 0;
		}
		.bgMain{
			border-radius: 8rpx 8rpx 0 0;
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left:0;
			background: rgba(0, 0, 0, .2);
			.oper{
				width: 100%;
				text-align: center;
				&>text{
					display: inline-block;
					background: rgba(247, 221, 94, 1);
					border-radius: 30rpx;
					padding: 15rpx 20rpx;
					margin: 0 10rpx;
					color: #666666;
				}
			}
		}
		.smallOper{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			overflow: hidden;
			// .delete{
			// 	float: left;
			// }
			// .star{
			// 	float: right;
			// }
			.star{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.con{
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 8rpx 8rpx;
		.tag{
			margin: 10rpx 0;
			&>text{
				display: inline-block;
				margin:0 10rpx 0 0;
			}
		}
		.avater{
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}
}
</style>